<template>
  <div>
    <van-sticky>
      <van-nav-bar title="首页" class="titleTop">
        <template #left>
          <van-icon :name="require('../assets/imgs/小米.png')" size="32" />
        </template>
        <template #right>
          <van-icon
            :name="require('../assets/imgs/留言.png')"
            size="26"
            badge="1"
          />
        </template>
      </van-nav-bar>

      <!-- 搜索框 -->
      <van-search
        v-model="search"
        shape="round"
        background="#D6DBDE"
        placeholder="请输入搜索关键词"
        right-icon="scan"
        @search="onSearch"
      />
    </van-sticky>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in shopList" :key="item.id">
        <van-image width="390" height="190" :src="item.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标签 -->
    <van-row type="flex" justify="center" class="label">
      <van-col span="6" offset="1"><van-icon name="passed" />官方商城</van-col>
      <van-col span="6" offset="1"><van-icon name="passed" />售后无忧</van-col>
      <van-col span="6" offset="1"><van-icon name="passed" />资质证照</van-col>
    </van-row>
    <!-- 商品宫格 -->
    <van-row type="flex" justify="center">
      <van-col span="24">
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in gridList"
            :icon="item.icon"
            :text="item.text"
            :key="item.id"
          >
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <!-- 商品 -->
    <van-card
      v-for="item in shopsList2"
      :key="item.id"
      :thumb="item.img"
      @click-thumb="detail(item.id)"
    >
      <template #title>
        <div class="title">{{ item.title }}</div>
      </template>
      <template #desc>
        <div class="desc">{{ item.desc }}</div>
      </template>
      <template #price>
        <div class="price">￥{{ item.price }}起</div>
      </template>
      <template #footer>
        <van-button size="mini" @click="collect(item.id)">收藏</van-button>
        <van-button size="mini" @click="addCart(item.id)">加购</van-button>
      </template>
    </van-card>
    <!-- 实现底部导航栏 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Home",
  data() {
    return {
      search: "",
      fav: "",
      shopsList2: [],
      shopList: [
        {
          id: 1,
          url: require("../assets/imgs/1.jpg"),
        },
        {
          id: 2,
          url: require("../assets/imgs/2.jpg"),
        },
        {
          id: 3,
          url: require("../assets/imgs/3.jpg"),
        },
        {
          id: 4,
          url: require("../assets/imgs/4.jpg"),
        },
        {
          id: 5,
          url: require("../assets/imgs/5.jpg"),
        },
      ],
      gridList: [
        {
          id: 1,
          text: "小米上新",
          icon: require("../assets/imgs/7.jpg"),
        },
        {
          id: 2,
          text: "手机",
          icon: require("../assets/imgs/8.jpg"),
        },
        {
          id: 3,
          text: "Xiaomi Civi",
          icon: require("../assets/imgs/9.jpg"),
        },
        {
          id: 4,
          text: "电视",
          icon: require("../assets/imgs/10.jpg"),
        },
        {
          id: 5,
          text: "大家电",
          icon: require("../assets/imgs/11.jpg"),
        },
        {
          id: 6,
          text: "米金兑券",
          icon: require("../assets/imgs/12.jpg"),
        },
        {
          id: 7,
          text: "小米众筹",
          icon: require("../assets/imgs/13.jpg"),
        },
        {
          id: 8,
          text: "电脑/平板",
          icon: require("../assets/imgs/14.jpg"),
        },
        {
          id: 9,
          text: "生活电器",
          icon: require("../assets/imgs/15.jpg"),
        },
        {
          id: 10,
          text: "智能家居",
          icon: require("../assets/imgs/16.jpg"),
        },
      ],
    };
  },
  mounted() {
    this.getAllShops();
  },
  methods: {
    // 收藏
    collect(id) {
      this.$axios
        .get("/shops/" + id)
        .then((res) => {
          let fav = res.data.fav;
          let data = {
            fav: fav + 1,
          };
          this.$axios
            .patch("/shops/" + id, data)
            .then((res) => {
              this.$toast("收藏成功!");
            })
            .catch((err) => {
              console.log(err);
              this.$toast("收藏失败!");
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 加购
    addCart(id) {
      this.$axios
        .get("/shops/" + id)
        .then((res) => {
          let sale = res.data.sale;
          if (res.statusText == "OK") {
            if (res.data.isCart === true) {
              this.$toast("购物车已存在!");
            } else {
              let data = {
                isCart: true,
                sale: sale + 1,
              };
              this.$axios
                .patch("/shops/" + id, data)
                .then((res) => {
                  if (res.statusText == "OK") {
                    this.$toast("添加成功!");
                  } else {
                    console.log("出错了！");
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 详情
    detail(id) {
      this.$router.replace({
        path: "/detail/" + id,
      });
    },
    onSearch() {
      // 实现搜索操作
      if (this.search.length > 0) {
        this.$axios
          .get("/shops?q=" + this.search)
          .then((res) => {
            if (res.statusText == "OK") {
              this.shopsList2 = res.data;
            } else {
              console.log("出错了!");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$notify({ type: "danger", message: "请输入搜索关键词" });
        this.$axios
          .get("/shops")
          .then((res) => {
            if (res.statusText == "OK") {
              this.shopsList2 = res.data;
            } else {
              console.log("出错了!");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    getAllShops() {
      // 获取所有商品
      this.$axios
        .get("/shops")
        .then((res) => {
          if (res.statusText == "OK") {
            this.shopsList2 = res.data;
          } else {
            console.log("出错了!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    Tabbar,
  },
};
</script>

<style scoped>
/* 标签 */
.label {
  color: #938f8fd0;
}
/* 价格 */
.price {
  color: #ff6700;
  font-size: 14px;
}
/* 标题栏 */
.titleTop {
  background: #fafafa;
}
/* 标题 */
.title {
  font-size: 16px;
}
/* 描述 */
.desc {
  font-size: 14px;
  color: #b0b0b0;
}
</style>